<template>
	<view class="scroll-container">
		<u-navbar title="待办事项" :is-back="false" :background="navbarBg" title-color="#fff" :border-bottom="false" back-icon-color="#fff"></u-navbar>
		<view class="fixed">
			<view class="search-box">
				<view class="search" @click="search">
					<u-icon class="icon-search" name="search" label-size="30"></u-icon>
					<span>搜索</span>
				</view>
			</view>
			<tabs :tabs="tabs" v-model="activeTab"></tabs>
		</view>
		<swiper class="swiper-container" :current="activeTab" @change="swiperChange">
			<swiper-item>
				<list ref="mescrollItem" :createTime="createTime" :i="0" :index="activeTab" :tabs="tabs" :height="height"></list>
			</swiper-item>
			<swiper-item>
				<list1 ref="mescrollItem" :createTime="createTime" :i="1" :index="activeTab" :tabs="tabs" :height="height"></list1>
			</swiper-item>
		</swiper>
		
		<!-- <mescroll-uni ref="mescrollRef" :top="top" @init="mescrollInit" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback">
			<view class="list">
				<view class="card" v-for="(item,index) in dataList" :key="index" @click="linkToDetail(item.id)">
					<view class="card-hd">{{item.title}}</view>
					<view class="card-bd">
						<view class="item">
							<span class="item-t">供应商单位：</span>
							<span class="item-v u-line-1">{{item.supplierName}}</span>
						</view>
						<view class="item">
							<span class="item-t">要求供应时间：</span>
							<span class="item-v u-line-1">{{item.supplyTime}}</span>
						</view>
						<view class="item">
							<span class="item-t">卸货位置：</span>
							<span class="item-v u-line-1">{{item.locationName}}</span>
						</view>
						<view class="item">
							<span class="item-t">预计所需算量：</span>
							<span class="item-v u-line-1">{{item.totalBudget}}t</span>
						</view>
					</view>
					<view class="card-fd">
						<span>申请时间：{{item.createTime}}</span>
					</view>
					
					<view  class="status primary">待审批</view>
				</view>	
				
			</view>
		</mescroll-uni> -->
		
		<view class="add" @click="loginout">退出</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import config from "@/common/config.js"
	import tabs from '@/components/tabs.vue'
	import list from './list.vue'
	import list1 from './list1.vue'
	export default{
		components:{tabs,list,list1},
		mixins:[MescrollMixin],
		data(){
			return {
				navbarBg:{'background':'rgba(0, 130, 255, 1)'},
				tabs:[{cate_name:"待我审批"},{cate_name:"我申请的"}],
				activeTab:0,// 当前tab的下标
				height:'',// 需要固定swiper的高度
				type:"project",
				top:0,
				keyword:'',
				actionStyle:{'color':'#fff'},
				dataList:[],
				upOption:{
					empty:{
						tip:"~暂无待办~"
					}
				},
				total:0
			}
		},
		onLoad(options){
			this.height = uni.getSystemInfoSync().windowHeight - uni.upx2px(224) + 'px' 
			this.type = options.type
		},
		methods:{
			swiperChange(e){
				this.activeTab = e.detail.current
			},
			refresh(){
				this.$nextTick(()=>{
					console.log(this.$refs.mescrollItem[this.activeTab])
					this.$refs.mescrollItem[this.activeTab].refresh()
				})
			},
			upCallback(page) {
				this.$u.api.getTodoList({current:page.num,size:page.size,keywords:this.keywords}).then(res => {
					if(res.code != 0){
						this.$u.toast(res.msg)
						return false
					}
					let curPageData = res.data ? res.data.records : [];
					let curPageLen = curPageData.length; 
					let totalSize = res.data ? res.data.total : 0;
					if(totalSize > 0){
						uni.setTabBarBadge({
							index:2,
							text:totalSize.toString()
						})
					}else{
						uni.hideTabBarRedDot({
							index:2
						})
					}
					if(page.num == 1) this.dataList = [];
					this.dataList = this.dataList.concat(curPageData);
					this.mescroll.endBySize(curPageLen, totalSize); 
				})
				
			},
			search(){
				uni.navigateTo({
					url:"/pages/search/index?type=order"
				})
			},
			linkToDetail(id){
				uni.navigateTo({
					url:`/pages/project/detail?id=${id}`
				})
			},
			loginout(){
				this.$u.api.loginout().then(res =>{
					this.$u.vuex('vuex_userInfo',null)
					uni.redirectTo({url:"/pages/login"})
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.scroll-container{
		display: flex;
		flex-direction: column;
		height: 100vh;
		.swiper-container{
			flex: 1;
		}
	}
	
	.search-box{
		padding: 32rpx 30rpx;
		background: linear-gradient(180deg, #0082FF 0%, rgba(0, 130, 255, 0.9) 36%, rgba(0, 130, 255, 0.57) 74%, rgba(0, 130, 255, 0) 100%);
		.search{
			display: flex;
			align-items: center;
			justify-content: center;
			height: 72rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			color: #A7ADB3;
			.icon-search{
				margin-right: 6rpx;
			}
			span{
				font-size: 28rpx;
			}
		}
	}
	.list{
		padding: 0 30rpx;
		.card{
			background: #FFFFFF;
			border-radius: 16rpx;
			display: flex;
			flex-direction: column;
			margin-bottom: 20rpx;
			position: relative;
			.card-hd{
				font-size: 34rpx;
				color:#28282C;
				font-weight: 600;
				margin-top: 5rpx;
				padding: 30rpx 24rpx 24rpx;
			}
			.card-bd{
				padding: 0 24rpx 8rpx;
				.item{
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 16rpx;
					font-size: 28rpx;
					.item-t{
						color: #798188;
					}
					.item-v{
						color:#333;
						max-width: 400rpx;
					}
				}
			}
			.card-fd{
				display: flex;
				align-items: center;
				height: 80rpx;
				border-top: 1px solid rgba(212, 226, 237, 0.6);
				color: #A6B1BA;
				font-size: 24rpx;
				padding: 0 24rpx;
				span{
					margin-right: 16rpx;
				}
			}
			.status{
				position: absolute;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0 16rpx;
				height: 40rpx;
				border-radius: 0px 16rpx 0px 16rpx;
				font-size: 20rpx;
				right: 0;
				top: 0;
				&.primary{
					background: rgba(19, 120, 255, 0.1);
					color: #1378FF;
				}
				&.success{
					background: rgba(39, 183, 16, 0.1);
					color: #27B710;
				}
				&.error{
					background: rgba(243, 43, 43, 0.1);
					color: #F32B2B;
				}
				&.warning{
					background: rgba(255, 153, 0,0.1);
					color: #ff9900;
				}
				&.info{
					background: rgba(144, 147, 153,0.1);
					color: #909399;
				}
			}
		}
	}
	.add{
		position: fixed;
		line-height: 96rpx;
		text-align: center;
		width: 96rpx;
		height: 96rpx;
		background: #1378FF;
		box-shadow: 0px 10rpx 56rpx -16rpx rgba(19,120,255,1);
		border-radius: 100%;
		right:20rpx;
		bottom:160rpx;
		z-index: 99;
		color: #fff;
	}
</style>
